<template>
    <div class="section_common">

        <div class="main">
            <el-form label-width="100px">

                <el-form-item label="申请授课类别" required>
                    <el-select v-model="applyType" multiple placeholder="请选择">
                        <el-option label="公共课培训" value="公共课培训"></el-option>
                        <el-option label="部门内部培训" value="部门内部培训"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="培训经验描述" required >
                    <el-input type="textarea" v-model="experience" size="mini"></el-input>
                </el-form-item>


                <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                    <van-step v-show="oneShow">
                        <h3>审批人：</h3>
                        <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="twoShow">
                        <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="threeShow">
                        <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="fourShow">
                        <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="fiveShow">
                        <van-image v-for="(item,index) in fiveLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                    <van-step v-show="csShow">
                        <h3>抄送人：</h3>
                        <van-image v-for="(item,index) in csLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                </van-steps>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Toast} from "vant";
    import Vue from 'vue';
    import { Image as VanImage } from 'vant';

    Vue.use(VanImage);

    export default {
        data() {
            return {
                active: -1,
                applyType:[],
                experience:"",

                rules: {
                    applyType: [
                        {required: true, message: '请输入课程名称', trigger: 'blur'}
                    ],
                    experience: [
                        {required: true, message: '请输入培训经验描述', trigger: 'blur'}
                    ]
                },
                sendTeacherUrl: "/mobiles/sendTeacherUrl", //提交申请Url
                nowUser: JSON.parse(localStorage.getItem('userInfo')).userId,
                oneShow:false,//审批是否显示
                oneLd:[],
                twoShow:false,
                twoLd:[],
                threeShow:false,
                threeLd:[],
                fourShow:false,
                fourLd:[],
                fiveShow:false,
                fiveLd:[],
                csShow:false,
                csLd:[]
            }
        },
        created() {
            //根据地区获取页面审批人
            this.selSpLeaderByNowUser();
        },
        methods: {
            //根据申请人的id找到对应的审批人
            selSpLeaderByNowUser(){
                this.$https.post('/mobiles/getTeacherSpLeader',{
                    nowUser:this.nowUser
                }).then((res)=>{
                    console.log(res.data.data)
                    if (res.data.data.csspusers.length>0){
                        this.csShow=true;
                        this.csLd=res.data.data.csspusers;
                    }else {
                        this.csShow=false;
                        this.csLd=[];
                    }
                    if (res.data.data.onespusers.length>0){
                        this.oneShow=true;
                        this.oneLd=res.data.data.onespusers;
                    }else {
                        this.oneShow=false;
                        this.oneLd=[];
                    }
                    if (res.data.data.twospusers.length>0){
                        this.twoShow=true;
                        this.twoLd=res.data.data.twospusers;
                    }else {
                        this.twoShow=false;
                        this.twoLd=[];
                    }
                    if (res.data.data.threespusers.length>0){
                        this.threeShow=true;
                        this.threeLd=res.data.data.threespusers;
                    }else {
                        this.threeShow=false;
                        this.threeLd=[];
                    }
                    if (res.data.data.fourspusers.length>0){
                        this.fourShow=true;
                        this.fourLd=res.data.data.fourspusers;
                    }else {
                        this.fourShow=false;
                        this.fourLd=[];
                    }
                    if (res.data.data.fivespusers.length>0){
                        this.fiveShow=true;
                        this.fiveLd=res.data.data.fivespusers;
                    }else {
                        this.fiveShow=false;
                        this.fiveLd=[];
                    }

                }).catch(err => {
                    console.log(err);
                })
            },
            submitForm() {
                var that = this;
                this.$https.post(this.sendTeacherUrl, {
                        applyUser: this.nowUser, //申请用户
                        applyType: this.applyType,
                        experience: this.experience

                    }).then(res => {
                    if (res.data.code == 200) {
                        that.$router.go(-1);
                        Toast("申请成功！");
                    } else if (res.data.code == 500) {
                        Toast(res.data.message);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            go() {
                this.$router.go(-1)
            }
        },
        beforeRouteLeave(to, from, next) {
            to.params.activeName = '培训管理';
            next();
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;

        .el-form {
            padding-right: 10px;

            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }

                margin-bottom: 20px;
            }
        }
    }
</style>
